/**
 * Created by fangshufeng on 2018/4/22.
 */
import React from 'react'
import QRCode from 'qrcode.react'

import {
    Modal, Row, Col, Button
} from 'antd';

import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import {registDevice} from '../redux/app.redux'

class QrCodeView extends React.Component {

    componentDidMount() {
        if (this.props.socketID) {
            this.props.registDevice();
        }
    }

    render() {
        const {current_env_tag, regist_succeed} = this.props;
        if (regist_succeed) {
            return <Redirect to="/mockTool/dashboard"/>
        }
        return current_env_tag === '' ? <Redirect to="/mockTool/envSelect"/> : <div style={{backgroundColor: 'red'}}>
            <Modal
                maskStyle={ {
                    backgroundImage:`url('/img/back.jpg')`,
                    backgroundRepeat:'round'
                } }
                title={ <div className="msg">当前环境：
                    <span style={{color: 'blue'}}>{this.props.current_env_tag}</span>
                    <p></p>
                    <div>手动关联请输入以下序列号：</div>
                    <span style={{color: 'red'}}>{this.props.socketID}</span>
                </div>}
                wrapClassName="vertical-center-modal"
                visible={true}
                style={{
                    top: 100
                }}
                closable={false}
                footer={<Button onClick={() => this.props.history.goBack()}>重新选择？</Button>}
                maskClosable={false}

            >
                <Row type='flex' justify="center">
                    <Col span={9}>
                        <div><QRCode value={ "nonobankMock://" + this.props.socketID}/></div>
                    </Col>
                </Row>

            </Modal>
        </div>
    }
}

export default connect(state => state.app, {registDevice})(QrCodeView);